<script setup lang="ts">
import { Memo, Notebook, User, EditPen, Lock } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores';
import router from '@/router';
const userStore = useUserStore()

const logoutButton = () => {
  ElMessageBox.confirm(
    '确认退出登录吗？',
    'Warning',
    {
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    })
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Log out completed',
      })
      userStore.setUser({})
      router.push('/login')
    })
    .catch()
}
</script>

<template>
  <div class="common-layout">
    <el-container class="aside-container">
      <el-aside width="240px">
        <el-scrollbar>
          <div class="aside-logo"></div>
          <el-menu :default-openeds="['/user']" active-text-color="#303133" router :default-active="$route.path">
            <el-menu-item index="/">
              <div class="menu-font"> <el-icon>
                  <Notebook />
                </el-icon>
                Post主页</div>
            </el-menu-item>
            <el-sub-menu index="/user">
              <template #title>
                <div class="menu-font">
                  <el-icon>
                    <Memo />
                  </el-icon>个人信息管理
                </div>
              </template>
              <el-menu-item index="/user/info">
                <el-icon>
                  <User />
                </el-icon>
                <span>基本资料</span>
              </el-menu-item>
              <el-menu-item index="/user/security">
                <el-icon>
                  <Lock />
                </el-icon>
                <span>账号安全</span>
              </el-menu-item>
              <el-menu-item index="/user/post">
                <el-icon>
                  <EditPen />
                </el-icon>
                <span>发布的Post</span>
              </el-menu-item>
            </el-sub-menu>

          </el-menu>
        </el-scrollbar>

      </el-aside>


      <el-container>
        <el-header>
          <div>Welcome <strong>{{ userStore.user.username }}</strong>
          </div>
          <el-button type="warning" @click="logoutButton">Log out</el-button>
        </el-header>
        <el-main><router-view /></el-main>

        <el-footer>Copyright &copy; Xx</el-footer>
      </el-container>
    </el-container>
  </div>
</template>


<style lang="scss" scoped>
.aside-container {
  height: 100vh;




  .el-aside {

    background: #ecf5ff;
    box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.3);

    .aside-logo {
      height: 120px;
      background: url('@/assets/nuaa-logo.png') no-repeat center / 120px auto;
    }

    .el-menu {
      border-right: none;
      background: #d9ecff;

      .menu-font {
        font-size: 18px;
        font-weight: bold;
        font-family: "Times New Roman", Times, serif;
      }
    }

  }

}

.el-header {

  background-color: #f4f4f5;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.el-main {

  padding: 0;
}

.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.el-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #73767a;
}
</style>